<script setup lang="ts">
import {StnConfirmPopBtn} from 'st-ui-vue3-navie'
import {StIconIconify} from 'st-common-ui-vue3'
import {ref} from 'vue'
import TrashIcon from '@iconify-icons/tabler/trash'
import AlertCircleFilledIcon from '@iconify-icons/tabler/alert-circle-filled'

/**
 * 组件参数
 */
const {
  text = '删除',
  isText = false,
  isBlock = true,
  isCollapse = false,
  isDisabled = false,
  confirmText = '是否确认删除？',
  isCascadeConfirm = false,
  cascadeConfirmText = '是否级联删除？'
} = defineProps<{
  // 按钮文本
  text?: string;
  // 按钮是否为文本按钮
  isText?: boolean;
  // 按钮是否为块级按钮
  isBlock?: boolean;
  // 按钮是否折叠收缩
  isCollapse?: boolean;
  // 按钮是否禁用
  isDisabled?: boolean;
  // 删除确认文本
  confirmText?: string;
  // 是否开启级联删除确认
  isCascadeConfirm?: boolean;
  // 级联删除确认文本
  cascadeConfirmText?: string;
}>()

/**
 * 组件自定义事件
 */
const emits = defineEmits<{
  /**
   * 点击取消事件
   *
   * @param {"negative-click"} e 事件名称
   * @returns {boolean | Promise<boolean> | any}
   */
  (e: 'negative-click'): boolean | Promise<boolean> | any;
  /**
   * 点击确定事件
   *
   * @param {"positive-click"} e 事件名称
   * @param {boolean} isCascade 是否级联删除
   * @returns {boolean | Promise<boolean> | any}
   */
  (e: 'positive-click', isCascade: boolean): boolean | Promise<boolean> | any;
}>()

// 是否级联删除
const isCascade = ref(false)
</script>

<template>
  <StnConfirmPopBtn
    type="error"
    :btn-text="text"
    :text="isText"
    :block="isBlock"
    :is-collapse="isCollapse"
    :btn-disabled="isDisabled"
    :show-popconfirm-icon="false"
    @negative-click="() => emits('negative-click')"
    @positive-click="() => emits('positive-click', isCascade)"
  >
    <template #trigger-btn-icon>
      <slot name="btn-icon">
        <StIconIconify :icon="TrashIcon"/>
      </slot>
    </template>
    <template #confirm-content>
      <div class="mb-4">
        <div class="flex items-center">
          <slot name="confirm-icon">
            <StIconIconify
              class="text-xl mr-1"
              :icon="AlertCircleFilledIcon"
              color="#F0A020"
            />
          </slot>
          <slot name="confirm-text">
            <span class="text-base">{{ confirmText }}</span>
          </slot>
        </div>
        <slot name="cascade-confirm" :is-cascade="isCascade">
          <div
            v-if="isCascadeConfirm"
            class="mt-2 flex items-center"
          >
            <span>{{ cascadeConfirmText }}</span>
            <n-switch size="small" v-model:value="isCascade"/>
          </div>
        </slot>
      </div>
    </template>
  </StnConfirmPopBtn>
</template>

<style scoped>

</style>
